import React, {Component} from 'react';
import { Image,View, Text,StyleSheet,Dimensions,ScrollView,WebView } from 'react-native';
import {WhiteSpace,Flex,ActivityIndicator,List,Toast,Carousel,Tabs} from 'antd-mobile-rn';
import Layout from '../components/Layout';
import { post } from '../utils/request';
import SyList from '../components/SyList';
import config from '../config';
import tool from '../utils/tool';
import CText from '../components/CText';
//import HTML from 'react-native-fence-html';
import HTMLView from 'react-native-htmlview';
//https://github.com/jsdf/react-native-htmlview
//import HTMLView from 'react-native-htmlview';

export default class ArticleDetail extends Component {
    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            id: this.props.navigation.state.params.id,
            title:"",
            detail:"",
            webviewhight:0,
            titleHeight:0,
        };
    }
    //组件加载
    componentDidMount() {     
        post("/openapi/getInfo/",{
            id:this.state.id
        },(r)=>{
            //document.title=r.data.title +"-文章-"+config.sitename;
            this.setState({
                title:r.data.title,
                detail:r.data.detail
            },()=>{
            //    let detailnode= ReactDOM.findDOMNode(this.detailref);
            //    let titlenode = ReactDOM.findDOMNode(this.titleref);
            //    detailnode.style.top=titlenode.offsetHeight+titlenode.offsetTop + 10 +"px";
            });
        },(e)=>{
            Toast.fail(e.message,3);
        },(s)=>{
            this.setState({loading:s});
        });
    }

    //组件卸载
    componentWillUnmount() {

    }
    //属性改变
    componentWillReceiveProps(nextProps) {
    }

//   renderNode=(node, index, siblings, parent, defaultRenderer)=>{
//         console.log(node.name);
//         if (node.name == 'br') {
//           return (
//             <View style={{height:0,marginTop:-5}}></View>
//           );
//         }
//       }

    render() {
        return (
            <Layout back selectedTab={"Article"} {...this.props}>
            <Flex style={{flex:1,flexDirection:"column"}}>
                <CText initHeight={10} title= {this.state.title} style={{margin:3}}>
                </CText>
                <Flex style={{flex:1,}}>
                    <ScrollView style={{flex: 1}}>
                        {/* <HTMLView
                            value={this.state.detail}
                            style={{height:this.state.webviewhight}}
                        /> */}
                        <View style={{height:this.state.webviewhight}}>
                        {/* <HTMLView value={this.state.detail} renderNode={this.renderNode}  /> */}
                        <WebView
                                automaticallyAdjustContentInsets={false}
                                style={{backgroundColor:"white"}}
                                source={{html: `<!DOCTYPE html><html><body style="font-size:13px;font-weight:normal;background-color:white;">${this.state.detail}<br/><br/><script>window.onload=function(){ window.location.hash = '#' + document.body.clientHeight;document.title = document.body.clientHeight;}</script></body></html>`, baseUrl: ''}}
                                //source={{uri:'http://www.baidu.com'}}
                                javaScriptEnabled={true}
                                domStorageEnabled={false}
                                scrollEnabled={false}
                                contentInset={{top:0,left:0}}
                                onNavigationStateChange={(title)=>{
                                    if(title.title != undefined) {
                                        //console.log("高度"+parseInt(title.title));
                                      this.setState({
                                        webviewhight:(parseInt(title.title))
                                      })
                                    }
                                  }}
                            />
                       </View>
                     </ScrollView>
                </Flex>
            </Flex>
                <ActivityIndicator
                    toast
                    size="large"
                    text="数据加载中..."
                    animating={this.state.loading}
                />
            </Layout>
        );
    }
}
